<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-05-24 17:10:11
 * @LastEditors: 代琪 1529992814@qq.com
 * @LastEditTime: 2022-06-29 20:33:55
 * @FilePath: \code\ctp-static-portal-front\src\components\common\showImg.vue
 * @Description: 显示图片
-->
<template>
  <img class="show-image" :class="[className]" :src="url" @load="checkSize" />
  <!-- <img class="show-image" :src="url" /> -->
</template>
<script>
  export default {
    name: 'ShowImage',
    props: {
      item: { type: Object }
      //有这个就是目前拿来解决多图滚动问题的，因为他是直接clone dom节点过去的，导致图片展示方式还没出来就clone过去了
      // imgClass: { type: String, default: '' },
    },
    data() {
      return {
        url: '',
        className: ''
      };
    },
    created() {
      this.url = this.setImageUrl(this.item);
    },
    methods: {
      /**
       * @description: 设置请求的图片url
       * @return {*}
       */

      setImageUrl(item) {
        const imgUrl = item.imageUrl || item.imageName || item.picUrl || item.picture?.picUrl;

        if (imgUrl) {
          return `${imgBasePath}/${imgUrl}`;
        }

        return _basePath + '/entry/assets/images/default.jpeg';
      },
      /**
       * @description:如果宽大于高，就设置class属性
       * @return {*}
       */
      checkSize(e) {
        const target = e.target || e.srcElement;
        const { width, height } = target;
        const { offsetWidth, offsetHeight } = target.parentNode;
        //子元素（图片）比例大于父元素（框）contain使用宽撑满
        if (width / height > offsetWidth / offsetHeight) {
          this.className += ' contain-width cover-height';
        }
        //如果是多图滚动直接clone dom的情况，就像同类元素增加class
        // if (this.imgClass) {
        //   $(`.${this.imgClass}`).addClass(this.className);
        // }
      }
    }
  };
</script>
